<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<!-- <image src="../../../static/left.png" style="position: fixed;top: 80upx;left: 20upx;width: 50upx;" mode="widthFix" @click="navBack"></image> -->
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">集贝</view>
			<view class="welcome">
				注册登录
			</view>
			<view class="input-content" style="margin-top: -50upx;">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input 
						type="number" 
						:value="mobile" 
						placeholder="请输入您的手机号码"
						maxlength="11"
						data-key="mobile"
						@input="mobileInput"
					/>
				</view>
				<view class="input-item">
					<text class="tit">验证码</text>
					<view style="display: flex;height: 300upx;">
						<input type="number" @input="verify" class="flex" maxlength="5" value="" placeholder="请输入5位短信验证码" />
						<button style="width: 200upx;height: 70upx;margin-top: -20upx;font-size: 28upx;line-height: 70upx;background-color: #05052B;margin-left: 50upx;color: #fff;" type="default" :disabled="codebtn" @click="getcode" v-cloak>{{codetext}}</button>
					</view>
				</view>
				<view class="input-item">
					<text class="tit">登录密码</text>
					<input 
						type="mobile" 
						value="" 
						placeholder="8-18位不含特殊字符的数字、字母组合"
						placeholder-class="input-empty"
						maxlength="20"
						password 
						data-key="pwd"
						@input="pwdInput"
					/>
				</view>
				<view class="input-item">
					<text class="tit">确认登录密码</text>
					<input 
						type="mobile" 
						value="" 
						placeholder="8-18位不含特殊字符的数字、字母组合"
						placeholder-class="input-empty"
						maxlength="20"
						password 
						data-key="pwd"
						@input="pwd2Input"
					/>
				</view>
				<view class="input-item">
					<text class="tit">邀请码</text>
					<view style="display: flex;height: 300upx;">
						<input type="text" class="flex" value="" @input="midInput" placeholder="请输入邀请码" />
						<!-- <image style="width: 200upx;height: 80upx;margin-top: -30upx;margin-left: 50upx;" @click="changeImg" :src="'http://m.hbs435000.com/web/index.php?c=utility&a=code&r='+timestamp"></image> -->
					</view>
				</view>
			</view>
			<button class="confirm-btn" @click="register" style="background-color: #05052B;" :disabled="loading">注册账号</button>
			<view class="forget-section" @click="backlogin">
				返回登录
			</view>
		</view>
		<!-- <view class="register-section">
			还没有账号?
			<text @click="toRegist">马上注册</text>
		</view> -->
		<!-- <view class="action-row">
			<navigator url="../reg/reg">注册账号</navigator>
			<text>|</text>
			<navigator url="../pwd/pwd">忘记密码</navigator>
		</view> -->
	</view>
	<!-- <view style="">
		<image src="../../../static/login_5.jpg" mode="" :style="{'width':systemInfo.windowWidth+'px','height':systemInfo.windowHeight+'px'}"
		 style="position: fixed;top: 0upx;left: 0;right: 0;bottom: 0;"></image>
		<view :class="{register:top}">
			<image src="../../../static/login_image.png" mode="" class="top" style="border: 1px solid orange;"></image>
			<view class="content">
				<view>
					<input class="uni-input" @input="mobileInput" type="number" placeholder="您的手机号" placeholder-style="color:#bbb" style="background: transparent;"  />
					<view class="webkit" style="margin: 0 30upx;">
						<input type="number" @input="verify" class="flex" maxlength="5" value="" placeholder="5位短信验证码" placeholder-style="color:#bbb" />
						<button class="inputright" type="default" :disabled="codebtn" @click="getcode" v-cloak>{{codetext}}</button>
					</view>
					<input class="uni-input" @input="pwdInput" password type="text" placeholder="请输入登录密码" placeholder-style="color:#bbb" style="background: transparent;"  />
					<input class="uni-input" @input="pwd2Input" password type="text" placeholder="请确认登录密码" placeholder-style="color:#bbb" style="background: transparent;"  />
					<input class="uni-input" @input="midInput" type="number" placeholder="请输入邀请码" placeholder-style="color:#bbb" style="background: transparent;" />
				</view>
				<button type="default" class="login-btn" @click="register" :loading="loading" style="background: transparent;color:#fff" >立即注册</button>
				<view class="btn-group webkit" style="border: 0;margin: 0 30upx;">
					<view class="flex"></view>
					<button type="primary" @click="backlogin">返回登录</button>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
	export default {
		data() {
			return {
				res: [],
				area: true,
				top: false,
				systemInfo: {},
				loading: false,
				timestamp: 0,
				mobile: '',
				pwd: '',
				pwd1: '',
				imgcode: "",
				agentid: "",
				verifycode: '',
				codetext: '获取验证码',
				codebtn: false,
				codenum: 60
			};
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (res) => {
					this.systemInfo = res
				}
			})
			var timestamp = (new Date()).getTime();
			this.timestamp = timestamp
		},
		methods: {
			change(e) {
				if (e.currentTarget.dataset.id == 1) {
					this.area = false
					this.top = true
				} else {
					uni.showToast({
						title: '请联系管理员',
						icon: "none"
					});
				}
			},
			changeImg() {
				var timestamp = (new Date()).getTime();
				this.timestamp = timestamp
			},
			getcode() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} 
				// else if (this.imgcode == "") {
				// 	uni.showToast({
				// 		title: '请输入图形验证码',
				// 		icon: "none"
				// 	});
				// } 
				else {
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.verifycode&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							temp: 'sms_reg',
							imgcode: this.imgcode
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								this.codebtn = true
								var codetexts = setInterval(() => {
									this.codenum = this.codenum - 1
									this.codetext = this.codenum + 's'
								}, 1000)
								setTimeout(() => {
									this.codebtn = false
									clearInterval(codetexts);
									this.codetext = '重新发送'
								}, 60000)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			register() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
				} else if (this.pwd == "") {
					uni.showToast({
						title: '请输入登录密码',
						icon: "none"
					});
				} else if (this.pwd1 == "") {
					uni.showToast({
						title: '请确认登录密码',
						icon: "none"
					});
				} else if (this.verifycode == "") {
					uni.showToast({
						title: '请输入短信验证码',
						icon: "none"
					});
				} else {
					this.loading = true
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.register&type=0&app=1',
						method: 'POST',
						data: {
							mobile: this.mobile,
							pwd: this.pwd,
							pwd1: this.pwd1,
							verifycode: this.verifycode,
							agentid:this.agentid
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							this.loading = false
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
							if (res.data.status == 1) {
								setTimeout(()=>{
									this.backlogin()
								},1000)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			backlogin() {
				uni.navigateTo({
					url: '../login'
				});
			},
			mobileInput(e) {
				this.mobile = e.target.value
			},
			imgcodeInput(e) {
				this.imgcode = e.target.value
			},
			pwd2Input(e) {
				this.pwd1 = e.target.value
			},
			pwdInput(e) {
				this.pwd = e.target.value
			},
			midInput(e) {
				this.agentid = e.target.value
			},
			verify(e) {
				this.verifycode = e.target.value
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	  color: $uni-color-error;
		font-size: 26upx;
	}
	
	.action-row navigator {
	  color: $uni-color-error;
		padding: 0 10px;
	}
	.container{
		padding-top: 115px;
		position:relative;
		width: 100vw;
		height: 115vh;
		overflow: hidden;
		background: #fff;
	}
	.wrapper{
		position:relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}
	.back-btn{
		position:absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		/* color: $font-color-dark; */
	}
	.left-top-sign{
		font-size: 120upx;
		color: #05052B;
		position:relative;
		left: 50upx;
		top: -100upx;
	}
	.right-top-sign{
		position:absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;
		&:before, &:after{
			display:block;
			content:"";
			width: 400upx;
			height: 80upx;
			background: url(../../../static/126.jpg) no-repeat center;
		}
		&:before{
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}
		&:after{
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}
	.left-bottom-sign{
		position:absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #ECD39A;
		border-radius: 50%;
		padding: 180upx;
	}
	.welcome{
		position:relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0,0,0,.3);
	}
	.input-content{
		padding: 0 60upx;
	}
	.input-item{
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 0 30upx;
		background:#f8f6fc;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;
		&:last-child{
			margin-bottom: 0;
		}
		.tit{
			height: 50upx;
			line-height: 56upx;
			font-size: 26upx;
			color: #606266;
		}
		input{
			height: 60upx;
			font-size: 30upx;
			color: #303133;
			width: 100%;
		}	
	}

	.confirm-btn{
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-error;
		color: #fff;
		font-size: 32upx;
		&:after{
			border-radius: 100px;
		}
	}
	.forget-section{
		font-size: 26upx;
		color: #4399fc;
		text-align: center;
		margin-top: 40upx;
	}
	.register-section{
		position:absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: 26upx;
		color: #606266;
		text-align: center;
		text{
			color: #4399fc;
			margin-left: 10upx;
		}
	}
</style>

